<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
  <link rel="stylesheet" href="./js/axios.js">
  <style>
    [v-cloak] {
      display: none;
    }
    body {
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 1335px;
      margin: auto;
    }

    h1 {
      text-align: center;
      color: #333;
      font-size: 30px;
      margin-bottom: 20px;
    }

    .hospital-element {
      margin-top: 25%;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .hospital-element2 {
      background-color: rgba(181, 229, 181, 0.53);
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .element-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .element-description {
      color: #666;
      margin-bottom: 20px;
    }
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-cloak>
      <div class="container" style="margin-top: 6%">
        <i class="el-icon-back" @click="goHome"  style="position: absolute; top: 20px;left: 20px;font-size: 24px">返回</i>
        <el-container style="background-color: whitesmoke">
          <el-header style="font-size: 35px;background-color: whitesmoke">医院登记管理系统</el-header>
          <!-- <el-main>Main</el-main> -->
          <el-footer style="background-color: whitesmoke">病人信息展示</el-footer>
        </el-container>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="" width="40">
        </el-table-column>
        <el-table-column prop="PSN_NAME" label="患者姓名" width="180">
        </el-table-column>
        <el-table-column prop="CEERTNO" label="身份证号" width="180">
        </el-table-column>
        <el-table-column prop="FIXMEDINS_NAME" label="医院名称" width="180">
        </el-table-column>
        <el-table-column prop="BEGIN_DATE" label="入院时间" width="180">
        </el-table-column>
        <el-table-column prop="END_DATE" label="出院时间" width="180">
        </el-table-column>
        <el-table-column prop="CREATE_TIME" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="UPDATE_TIME" label="更新时间" width="180">
        </el-table-column>
        <el-table-column label="" width="30">
        </el-table-column>
      </el-table>
      <el-container v-show="tableData.length>1">
        <!-- <el-main>Main</el-main> -->
        <el-footer>共计{{tableData.length}}位病人</el-footer>
      </el-container>
    </div>
    </div>

  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

  var vm = new Vue({
    el: '#app',
    data: {
      activeIndex: '1',
      activeIndex2: '1',
      tableData: []
    },
    mounted() {
      this.getM();
      var intervalId = setInterval(getM, 5000);
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        var intervalId = setInterval(getM, 5000);
      },
      stopMethodInterval() {
        // 停止定时调用方法
        clearInterval(this.methodInterval);
      },
      created() {
        // 在Vue实例创建时开始定时调用方法
        this.getM();
        var intervalId = setInterval(getM, 5000);
      },
      beforeUnmount() {
        // 在组件卸载前停止定时调用方法
        this.stopMethodInterval();
      },      goHome(){
        window.location.href = './index.html'
      },
//       getM(url) {
//         var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
//
// xhr.open('GET', url, true); // 配置请求方法和 URL，使用 GET 请求方式和异步方式
//
// xhr.onreadystatechange = function() {
//   if (xhr.readyState === 4) {
//     if (xhr.status === 200) {
//       var response = JSON.parse(xhr.responseText);
//       this.tableData = response; // 将获取到的后端数据赋值给 backendData 变量
//       console.log(response);
//
//
//     } else {
//       console.log('请求失败，状态码：' + xhr.status);
//     }
//   }
// };
//
// xhr.send(); // 发送请求
//
//       },
      startMethodInterval() {
        // 每5秒调用一次方法
        this.methodInterval = setInterval(() => {
          this.getM(); // 替换为你想要调用的方法
        }, 5000);
      },

        getM() {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
              var response = JSON.parse(xhr.responseText);
              this.tableData = response; // 将获取到的后端数据赋值给 backendData 变量
            }
          }.bind(this);

          xhr.open('GET', '/api/getAllParent', true); // 替换为实际的后端请求接口
          xhr.send();
        }
      }
  })
</script>

</html>